<template>
    <div class="">
        <el-table ref="elTable" :data="tableData" style="width: 100%" :row-key="rowKey"
            :header-row-style="{ color: '#202536' }" :header-cell-style="{ background: '#f8f8f8' }"
            :row-style="{ color: '#5E617D' }" @selection-change="handleSelectionChange">
            <template v-for="(i, index) in tableHead" :key="index">
                <template v-if="i.prop === 'index'">
                    <el-table-column :fixed="i.fixed" type="selection" width="55"
                        :reserve-selection="i.reserveSelection" :selectable="doSelectable" />
                </template>
                <template v-else>
                    <el-table-column :prop="i.prop" :label="i.label" :width="i.width || 'auto'" :fixed="i.fixed">
                        <template #default="scope">
                            <slot :name="i.prop" :row="scope.row">
                                <span :style="{ color: i.color || '#5e617d' }" :class="{ 'pointer': i.handleClick }"
                                    @click="i.handleClick && i.handleClick(scope.row, i)">
                                    <span v-if="scope.row[i.prop] || scope.row[i.prop] === 0">{{ i.prefix }}</span>
                                    <span v-if="i.map" :style="{ color: i.colorMap[scope.row[i.prop]] ?? '' }">
                                        {{ i.map[scope.row[i.prop]] ?? (i.defaultValue ?? '--') }}
                                    </span>
                                    <span v-else>
                                        {{ scope.row[i.prop] ?? (i.defaultValue ?? '--') }}
                                    </span>
                                    <span v-if="scope.row[i.prop] || scope.row[i.prop] === 0">{{ i.suffix }}</span>
                                </span>
                            </slot>
                        </template>
                    </el-table-column>
                </template>
            </template>
            <template #empty>
                <el-empty :description="description" />
            </template>
        </el-table>
        <div class="flex flex-jc-end mg-t-20">
            <el-pagination v-if="showPagination" v-model:current-page="pageData.pageNum"
                v-model:page-size="pageData.pageSize" :page-sizes="[10, 30, 50, 100]"
                layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { cloneDeep } from 'lodash'

export default defineComponent({
    props: {
        tableHead: {
            type: Array,
            default() {
                return []
            }
        },
        tableData: {
            type: Array,
            default() {
                return []
            }
        },
        showPagination: {
            type: Boolean,
            default: true
        },
        pageInfo: {
            type: Object,
            default() {
                return {}
            }
        },
        rowKey: {
            type: [String, Function],
            default: ''
        },
        selectable: {
            type: Function
        },
        description: {
            type: String,
            default: '暂无数据'
        }
    },
    data() {
        return {
            searchData: [],
            pageData: {} as any
        }
    },
    watch: {
        searchList: {
            handler(newval: any) {
                this.searchData = cloneDeep(newval)
            },
            immediate: true
        },
        pageInfo: {
            handler(newval: any) {
                this.pageData = cloneDeep(newval)
            },
            immediate: true,
            deep: true
        }
    },
    methods: {
        handleSizeChange(ev: any) {
            this.pageData.pageSize = ev
            this.$emit('update:pageInfo', this.pageData)
            this.$emit('sizeChange', ev)
        },
        handleCurrentChange(ev: any) {
            this.pageData.pageNum = ev
            this.$emit('update:pageInfo', this.pageData)
            this.$emit('currentChange', ev)
        },
        handleSelectionChange(selections: any) {
            this.$emit('selectionChange', selections)
        },
        doSelectable(row: any, index: any) {
            if ((this as any).selectable) {
                // console.log(2121, row, index);
                return (this as any).selectable(row, index)
            }
            return true
        }
    }
})
</script>

<style scoped lang="stylus">

</style>
